<template>
  <el-card class="box-card" style="max-width: 600px; margin: 20px auto;">
    <h2 style="text-align:center; margin-bottom: 20px;">现场挂号</h2>
    <el-form :model="form" label-width="100px" ref="registerForm" :rules="rules" status-icon>
      <el-form-item label="科室" prop="department_id">
        <el-select v-model="form.department_id" placeholder="请选择科室" @change="onDeptChange" clearable>
          <el-option
              v-for="dept in departments"
              :key="dept.ID"
              :label="dept.DeptName"
              :value="dept.ID"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="医生" prop="doctor_id">
        <el-select v-model="form.doctor_id" placeholder="请选择医生" clearable>
          <el-option
              v-for="doc in doctors"
              :key="doc.ID"
              :label="doc.RealName"
              :value="doc.ID"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="姓名" prop="patient_name">
        <el-input v-model="form.patient_name" placeholder="请输入患者姓名" />
      </el-form-item>

      <el-form-item label="身份证号" prop="patient_idcard">
        <el-input v-model="form.patient_idcard" placeholder="请输入身份证号" maxlength="18" />
      </el-form-item>

      <el-form-item label="预约时间" prop="visit_time">
        <el-date-picker
            v-model="form.visit_time"
            type="datetime"
            placeholder="请选择预约时间"
            :picker-options="pickerOptions"
            style="width: 100%;"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitRegister">确认挂号</el-button>
        <el-button @click="resetForm" style="margin-left: 10px;">重置</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request' // axios封装请求工具，替换成你的请求实例

const form = reactive({
  department_id: null,
  doctor_id: null,
  patient_name: '',
  patient_idcard: '',
  visit_time: null,
})

const departments = ref([])
const doctors = ref([])

const registerForm = ref(null)

// 预约时间只能选今天以后
const pickerOptions = {
  disabledDate(time) {
    return time.getTime() < Date.now() - 86400000
  }
}

// 表单校验规则
const rules = {
  department_id: [{ required: true, message: '请选择科室', trigger: 'change' }],
  doctor_id: [{ required: true, message: '请选择医生', trigger: 'change' }],
  patient_name: [{ required: true, message: '请输入患者姓名', trigger: 'blur' }],
  patient_idcard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{17}(\d|X|x)$)/, message: '身份证格式不正确', trigger: 'blur' }
  ],
  visit_time: [{ type: 'date', required: true, message: '请选择预约时间', trigger: 'change' }]
}

// 加载科室列表
function loadDepartments() {
  service.get('/department/list').then(res => {
    departments.value = res.data
  })
}

// 根据科室加载医生列表
function onDeptChange(deptId) {
  form.doctor_id = null
  if (!deptId) {
    doctors.value = []
    return
  }
  service.post('/user/listByDept', { deptID: deptId }).then(res => {
    doctors.value = res.data
  })
}

// 提交挂号
function submitRegister() {
  registerForm.value.validate(valid => {
    if (!valid) return
    const payload = {
      patient_name: form.patient_name,
      patient_idcard: form.patient_idcard,
      department_id: form.department_id,
      doctor_id: form.doctor_id,
      visit_time: form.visit_time,
    }
    service.post('/register/add', payload).then(() => {
      ElMessage.success('挂号成功！')
      resetForm()
    }).catch(() => {
      ElMessage.error('挂号失败，请重试')
    })
  })
}

// 重置表单
function resetForm() {
  registerForm.value.resetFields()
  doctors.value = []
}

onMounted(() => {
  loadDepartments()
})
</script>

<style scoped>
.box-card {
  box-shadow: 0 0 8px rgba(0,0,0,0.12);
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}
</style>
